
<%@ page import="com.surelution.projects.crm.GasType" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:javascript library="jquery" plugin="jquery"/>
        <title><g:message code="default.overview.label"/></title>
		<style type="text/css">
			html{height:100%}
			body{height:100%;margin:0px;padding:0px}
			#container{height:100%}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
		<script type="text/javascript">
			

			var map;
			function initMap() {
				map = new BMap.Map("container_map");
				map.mapType = BMAP_NORMAL_MAP;
				var center = new BMap.Point(${latLng});
				
				map.centerAndZoom(center, 13);
				map.addControl(new BMap.NavigationControl());
				map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
			}

			var overlays;
			var gsList = new Array();
			var osList = new Array();
			var marketList = new Array();

			function addMarker(x, y, iconFile, stationName, address, type, gasPriceList, pic, stationId, cSize,mSize, annualSale){
				var myIcon = new BMap.Icon(
						iconFile, 
						new BMap.Size(16, 16), 
						{offset: new BMap.Size(0, 0),size:new BMap.Size(50, 50)}
				);
				var point = new BMap.Point(x, y);
				var marker = new BMap.Marker(point, {icon: myIcon}); 
				map.addOverlay(marker);
				var oStationLink = '${createLink(controller:"ownStation",action:"show") }/';
				var gStationLink = '${createLink(controller:"competitorStation",action:"show") }/';
				var marketLink = '${createLink(controller:"market",action:"show") }/';
				var linkLocation;
				if (gasPriceList.length==0) gasPriceList.push("无"); 
				if (type=="os"){
					osList.push(marker);
					linkLocation = gStationLink + stationId;
					var sContent = 
						"<div style='width:300px;' id='imgDemo'" +
						"<h4 style='margin:0 0 5px 5px;font-size:16px;'><a href='" + linkLocation + "'>" + stationName +"</a></h4>" + 
						"<a href='" + linkLocation +
						"'><img style='float:right;margin:4px'  src='" + pic +"' width='50' height='50'/></a>" + "<p></p>"+
						"<p style='margin-top:20px;font-size:16px 黑体,arial;color:black;'>" + "地址:"+ "</p>" +
						"<p style='color:blue;'>" + address + "</p>" + 
						"<p style='color:black;'>" +"在售油品及价格:" + "</p>" +
						"<p style='color:blue;'>" + gasPriceList + "</p>" + 
						"<p style='color:black;'>" +"油品总销量:" + 
						"<p style='color:blue;'>" + annualSale + "(吨)" + "</p>" +
						"</div>";
				}
				if (type=="gs"){
					gsList.push(marker);
					linkLocation = oStationLink + stationId;
					var sContent = 
						"<div style='width:300px;' id='imgDemo'" +
						"<h4 style='margin:0 0 5px 5px;font-size:16px;'><a href='" + linkLocation + "'>" + stationName +"</a></h4>" + 
						"<a href='" + linkLocation +
						"'><img style='float:right;margin:4px'  src='" + pic +"' width='50' height='50'/></a>" + "<p></p>"+
						"<p style='margin-top:20px;font-size:16px 黑体,arial;color:black;'>" + "地址:"+ "</p>" +
						"<p style='color:blue;'>" + address + "</p>" + 
						"<p style='color:black;'>" +"在售油品及价格:" + "</p>" +
						"<p style='color:blue;'>" + gasPriceList + "</p>" + 
						"<p style='color:black;'>" + "竞争加油站个数:" + "</p>" +
						"<p style='color:blue;'>" + cSize + "</p>" +
						"<p style='color:black;'>" + "客户个数:" + "</p>" +
						"<p style='color:blue;'>" + mSize + "</p>" +
						"<p style='color:black;'>" +"油品总销量:" + 
						"<p style='color:blue;'>" + annualSale + "(吨)" + "</p>" +
						"</div>";
				}				
				if (type=="market"){
					marketList.push(marker);
					linkLocation = marketLink + stationId;
					var sContent = 
						"<div style='width:300px;' id='imgDemo'" +
						"<h4 style='margin:0 0 5px 5px;font-size:16px;'><a href='" + linkLocation + "'>" + stationName +"</a></h4>" + 
						"<a href='" + linkLocation +
						"'><img style='float:right;margin:4px'  src='" + pic +"' width='50' height='50'/></a>" + "<p></p>"+
						"<p style='margin-top:20px;font-size:16px 黑体,arial;color:black;'>" + "地址:"+ "</p>" +
						"<p style='color:blue;'>" + address + "</p>" + 
						"<p style='color:black;font-size:14px;'>" +"年度累计销量:" + "</p>" +
						"<p style='color:blue;'>" + gasPriceList + "(吨)"　+　"</p>" + 
						"</div>";
				}		
				var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
				marker.addEventListener("click", function(){          
					   this.openInfoWindow(infoWindow);
					   //图片加载完毕重绘infowindow
					   document.getElementById('imgDemo').onload = function (){
					   infoWindow.redraw();}
				});
				map.addEventListener("zoomstart", function(){          
				});
			}

			function osCheck()
			{
				if (os_station.checked==true) {
					var params = document.getElementById("ownStation").value;
					 var oId = params.split(",")[2];
					if (!oId){
						var link = "/petro-crm/location/oStationList";
						}
					else{
						var link = "/petro-crm/location/oStationList?oId=" + oId;
					}
					$.ajax({
					  	url: link,
					  	type:"Get",
					  	dataType: 'xml',
					  	cache:false,
					  	success: parseXml
					});
				}
				else{
					
					var l = gsList.length;
					for (i=0;i<=l;i++){
						map.removeOverlay(gsList[i]);
					}
				};
			}
			
			function gsCheck()
			{
				if (gs_station.checked==true) {
		    		 var params = document.getElementById("ownStation").value;
					 var oId = params.split(",")[2];
					if (!oId){
						var link = "/petro-crm/location/gStationList";
						}
					else{
						var link = "/petro-crm/location/gStationList?oId=" + oId;
					}
					$.ajax({
					  	url: link,
					  	type:"Get",
					  	dataType: 'xml',
					  	cache:false,
					  	success: osparseXml
					});
				}
				else{
					var l = osList.length;
					for (i=0;i<=l;i++){
							map.removeOverlay(osList[i]);
						}
					};
			}
			
			function mkCheck()
			{

				if (market.checked==true) {
		    		 var params = document.getElementById("ownStation").value;
					 var oId = params.split(",")[2];
					if (!oId){
						var link = "/petro-crm/location/marketList";
						}
					else{
						var link = "/petro-crm/location/marketList?oId=" + oId;
					}
					$.ajax({
					  	url: link,
					  	type:"Get",
					  	dataType: 'xml',
					  	cache:false,
					  	success: mkparseXml
					});
				}
				else{
					var l = marketList.length;
					for (i=0;i<=l;i++){
						map.removeOverlay(marketList[i]);
					}
				};
			}

			// select station ,locate map's center to station
			function changeMap() {
				 var params = document.getElementById("ownStation").value;
				 var lng = params.split(",")[0];
				 var lat = params.split(",")[1];
				 var oId = params.split(",")[2];
				 if (lng == 0 &&lat ==0){
					alert("请为加油站添上坐标，地图将回到公司机关。");
					lat = 120.741578;
					lng = 30.748013
					// window.location.href="../ownStation/reset"; 
					 }
				 if (params.length==0){
						lat = 120.741578;
						lng = 30.748013
				 }
				 var center = new BMap.Point(lat, lng);
				 map.centerAndZoom(center, 13);
				 
				 var link = "/petro-crm/location/oStationList?oId=" + oId;
				 $.ajax({
					  	url: link,
					  	type:"Get",
					  	dataType: 'xml',
					  	cache:false,
					  	success: gParseXml
					});
			}

			function gParseXml(xml) {
				$(xml).find("station").each(function(index, station){
					var id = $(station).attr("id");
					var name = $(station).attr("name");
					var latitude = $(station).attr("longitude");
					var longitude = $(station).attr("latitude");
					var address = $(station).attr("address");
					var picID = $(station).attr("pic");
					var cSize = $(station).attr("cSize");
					var mSize = $(station).attr("mSize");
					var annualSale = $(station).attr("annualSale");
					if (annualSale=="") annualSale=0;
					var iconFile = "${resource(dir:'dynimgs/gs_icons')}/" + "pc32.gif";
					var pic = "${resource(dir:'picture/ownStationPic')}/" + picID;
					var type = "gs";	
					if (picID == 0) pic = iconFile;
					var gasPriceList = new Array();
				    $(station).find("gasOnSales").each(function(index, gasOnSales){
					  $(station).find("gasOnSale").each(function(index, gasOnSale){
						  	var gasType = $(gasOnSale).attr("gasType");
							var price = $(gasOnSale).attr("price");
							var promoting = $(gasOnSale).attr("promoting");
							if (promoting=="true") promoting="(有促销)";
							else if (promoting=="false") promoting="";
							var gasPrice = gasType + ":" + price + promoting;
							gasPriceList.push(gasPrice);
						  });
				    });
				 	var myIcon = new BMap.Icon(
						iconFile, 
						new BMap.Size(16, 16), 
						{offset: new BMap.Size(0, 0),size:new BMap.Size(50, 50)}
					);
					var point = new BMap.Point(latitude, longitude);
					var marker1 = new BMap.Marker(point, {icon: myIcon}); 
					map.addOverlay(marker1);
					gsList.push(marker1);
					var oStationLink = '${createLink(controller:"ownStation",action:"show") }/'+id;
					if (gasPriceList.length==0) gasPriceList.push("无"); 
					var sContent = 
							"<div style='width:300px;' id='imgDemo'" +
							"<h4 style='margin:0 0 5px 5px;font-size:16px;'><a href='" + oStationLink + "'>" + name +"</a></h4>" + 
							"<a href='" + oStationLink +
							"'><img style='float:right;margin:4px'  src='" + pic +"' width='50' height='50'/></a>" + "<p></p>"+
							"<p style='margin-top:20px;font-size:16px 黑体,arial;color:black;'>" + "地址:"+ "</p>" +
							"<p style='color:blue;'>" + address + "</p>" + 
							"<p style='color:black;'>" +"在售油品及价格:" + "</p>" +
							"<p style='color:blue;'>" + gasPriceList + "</p>" + 
							"<p style='color:black;'>" +"油品总销量:" + 
							"<p style='color:blue;'>" + annualSale + "(吨)" + "</p>" +
							"</div>";
				    var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
				    marker1.openInfoWindow(infoWindow);
				    document.getElementById('imgDemo').onload = function (){
						   infoWindow.redraw();}
				});
			}
			
			function parseXml(xml) {
				$(xml).find("station").each(function(index, station){
					var id = $(station).attr("id");
					var name = $(station).attr("name");
					var latitude = $(station).attr("longitude");
					var longitude = $(station).attr("latitude");
					var address = $(station).attr("address");
					var picID = $(station).attr("pic");
					var cSize = $(station).attr("cSize");
					var mSize = $(station).attr("mSize");
					var annualSale = $(station).attr("annualSale");
					if (annualSale=="") annualSale=0;
					var iconFile = "${resource(dir:'dynimgs/gs_icons')}/" + "pc32.gif";
					var pic = "${resource(dir:'picture/ownStationPic')}/" + picID;
					var type = "gs";	
					if (picID == 0) pic = iconFile;
					var gasPriceList = new Array();
				  $(station).find("gasOnSales").each(function(index, gasOnSales){
					  $(station).find("gasOnSale").each(function(index, gasOnSale){
						  	var gasType = $(gasOnSale).attr("gasType");
							var price = $(gasOnSale).attr("price");
							var promoting = $(gasOnSale).attr("promoting");
							if (promoting=="true") promoting="(有促销)";
							else if (promoting=="false") promoting="";
							var gasPrice = gasType + ":" + price + promoting;
							gasPriceList.push(gasPrice);
						  });
				 addMarker(latitude,longitude,iconFile,name,address,type,gasPriceList,pic,id,cSize,mSize,annualSale);
				  });
				});
			}

			function osparseXml(xml) {
				$(xml).find("cstation").each(function(index, cstation){
					var id = $(cstation).attr("id");
					var cname = $(cstation).attr("name");
					var clatitude = $(cstation).attr("longitude");
					var clongitude = $(cstation).attr("latitude");
					var caddress = $(cstation).attr("address");
					var cicon = $(cstation).attr("iconId");
					var picID = $(cstation).attr("pic");
					var annualSale = $(cstation).attr("annualSale");
					var iconFile = "${resource(dir:'picture/competitorCompany')}/" + cicon;
					var pic = "${resource(dir:'picture/competitorStationPic')}/" + picID;
					if (picID == 0) pic = iconFile;
					if (annualSale=="") annualSale=0;
					var type ="os";
					var gasPriceList = new Array();
					var cSize = 0;
					var mSize = 0;
					  $(cstation).find("gasOnSales").each(function(index, gasOnSales){
						  $(cstation).find("gasOnSale").each(function(index, gasOnSale){
							  	var gasType = $(gasOnSale).attr("gasType");
								var price = $(gasOnSale).attr("price");
								var promoting = $(gasOnSale).attr("promoting");
								var gasPrice = gasType + ":" + price;
								if (promoting=="true") promoting="(有促销)";
								else if (promoting=="false") promoting="";
								var gasPrice = gasType + ":" + price + promoting;
								gasPriceList.push(gasPrice);
							  });
					addMarker(clatitude,clongitude,iconFile,cname,caddress,type,gasPriceList,pic,id,cSize,mSize,annualSale);
					  });

				});
			}			
			
			function mkparseXml(xml) {
				$(xml).find("market").each(function(index, market){
					var id = $(market).attr("id");
					var cname = $(market).attr("name");
					var clatitude = $(market).attr("longitude");
					var clongitude = $(market).attr("latitude");
					var caddress = $(market).attr("address");
					var picID = $(market).attr("pic");
					var annualSaleNumber = $(market).attr("annualSaleNumber");
					var type = $(market).attr("type");
					var gasPriceList = new Array();
					if (type==2){
						var iconFile = "${resource(dir:'dynimgs/gs_icons')}/" + "redFlag.png";
					}
					else {
						var iconFile = "${resource(dir:'dynimgs/gs_icons')}/" + "yellowFlag.png";
						}
					if (annualSaleNumber) gasPriceList = annualSaleNumber;
					var pic = "${resource(dir:'marketPicture/name')}/" + picID;
					if (picID == 0) pic = iconFile;
					var type ="market";
					addMarker(clatitude,clongitude,iconFile,cname,caddress,type,gasPriceList,pic,id);
				});
			}		
			
			$(document).ready(function() {
				initMap();
				$.ajax({
				  	url: '${createLink(controller:"location", action:"oStationList")}',
				  	type:"Get",
				  	dataType: 'xml',
				  	cache:false,
				  	success: parseXml
				});
			});

		</script>
    </head>
    <body>
    	<div id="title" style="height:5%;text-align:center;font-size:16px;color:blue;position:relative;top:7px;">
    	选择站名：<select id="ownStation" style="margin-right:100px;" onchange="changeMap();">
    			<option value="" >全部</option>
    		<g:each in="${com.surelution.projects.crm.OwnStation.list()}" var="station" >
    			<option value="${station.latitude },${station.longitude},${station.id}" >${station.shortName }</option>
    		</g:each>
    	</select>
			<g:checkBox name="market"  onclick="mkCheck();"/>客户
			<g:checkBox name="gs_station" onclick="gsCheck();" />竞争对手
			<g:checkBox name="os_station" onclick="osCheck();" checked="true" />中石油
    	</div>
 			<div  id="container_map"></div>
    </body>
</html>
